export const addDomProduceIntroduce = (editor) => {
 // ------------------------------------------------------------------------------------------------------------
    /*
      产品介绍图文组件
      点击组件并输入后端地址，这里对应的是http://localhost:8085/article/selectOne/{id}，文章获取接口
      会将对应图片和标题渲染进去
      若要尝试将两个及以上的组件放置同一行可以尝试定义style的float属性
    */
      const tblockModel = editor.DomComponents.addType('tblock', {
        model: {
          defaults: {
            attributes:{'data-gjs-type':'tblock'},
            script() {
              const el = this;
              const at = el.getAttribute("tdate")
              let tdate = at ? JSON.parse(at) : '暂无数据';
              if (at) {
                // 获取组件元素，区分每个自定义组件会有一个单独的id，以免多组件间的class或id重叠导致出错
                var that = document.getElementById(this.attributes.id.value);
                var produceImg = that.getElementsByClassName('produceImg');
                var produceContent = that.getElementsByClassName('produceContent')
                produceImg[produceImg.length - 1].src = tdate.data.photo;
                produceContent[produceContent.length - 1].innerText = tdate.data.title;
              }
            },
  
          },
        },
      });
  
      // 给component type 定义 view 
      const tblockView = editor.DomComponents.getType('tblock').view.extend({
        events: {
          click: function () {
            const model = this.model;
            const newTdate = prompt('Input message src！', "");
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
              if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                model.addAttributes({ tdate: xmlhttp.response });
                model.trigger('change:script');
              }
            }
            xmlhttp.open("GET", newTdate, true);
            xmlhttp.send();
          },
        },
      });
  
      // 注册 component 和 view
      editor.DomComponents.addType('tblock', {
        model: tblockModel,
        view: tblockView,
      });
      editor.BlockManager.add('produce', {
        label: '产品单元(后端)',
        category: '产品中心组件',
        media:`<svg t="1720768913590" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28122" width="30" height="30"><path d="M504.1 452.5c-18.3 0-36.5-4.1-50.7-10.1l-280.1-138c-18.3-10.1-30.4-24.4-30.4-40.6 0-16.2 10.2-32.5 30.4-42.6L455.4 77.1c16.2-8.1 34.5-12.2 54.8-12.2 18.3 0 36.5 4.1 50.7 10.1L841 213c18.3 10.1 30.4 24.4 30.4 40.6 0 16.2-10.1 32.5-30.4 42.6L558.9 440.3c-16.3 8.1-34.5 12.2-54.8 12.2zM193.6 261.7l280.1 138c8.1 4.1 18.3 6.1 30.4 6.1 12.2 0 24.4-2 32.5-6.1l284.1-144.1-280.1-138c-8.1-4.1-18.3-6.1-30.4-6.1-12.2 0-24.4 2-32.5 6.1L193.6 261.7z m253.6 696.1c-10.1 0-20.3-2-30.4-8.1L165.1 817.8c-30.4-14.2-52.8-46.7-52.8-73.1V391.6c0-24.4 18.3-42.6 44.6-42.6 10.1 0 20.3 2 30.4 8.1L437.1 489c30.4 14.2 52.8 46.7 52.8 73.1v353.1c0 24.4-18.3 42.6-42.7 42.6z m-10.1-48.7c2 2 4.1 2 6.1 2v-349c0-8.1-10.1-24.4-26.4-32.5L165.1 397.7c-2-2-4.1-2-6.1-2v349.1c0 8.1 10.2 24.4 26.4 32.5l251.7 131.8z m144.1 48.7c-24.4 0-42.6-18.3-42.6-42.6V562.1c0-26.4 22.3-58.9 52.8-73.1L841 357.1c10.1-4.1 20.3-8.1 30.4-8.1 24.4 0 42.6 18.3 42.6 42.6v353.1c0 26.4-22.3 58.9-52.8 73.1L611.6 949.7c-12.2 6.1-20.3 8.1-30.4 8.1z m280-560.1L611.6 529.6c-16.2 8.1-26.4 24.4-26.4 32.5v349.1c2 0 4.1-2 6.1-2l249.6-131.9c16.2-8.1 26.4-24.4 26.4-32.5V395.7c-2 0-4 2-6.1 2z m0 0" p-id="28123"></path></svg>`,
        content: {
          type: 'tblock', content: `<div style="border: 1px solid lightgray;width: 200px;height: 200px;background-color:white;color:black">
            <img class="produceImg" style="width: 100%;height: 60%;" src="https://cdn4.codesign.qq.com/prototypes/2023/08/03/xDP3923q32qn08ZwlKp03/apgsmrtqzvfi3x3v/5c2600c7572af1bf8847061f35b69b1c.png"/>
            <div style="width: 100%;height: 40%;padding: 10px;">
                <div class="produceContent" style="height: 30%;width: 100%;font-size: 10px;">
                    Bentley Descartes三维图像处理软件
                </div>
                <div style="height: 30%;width: 100%;padding-right:5%;margin-top:10px;display: flex;flex-direction: row-reverse;height: 30%;">
                    <button style="border-radius: 5px;border: 1px solid lightgray;font-size: 10px;background-color: white;">了解更多</button>
                    <button style="border-radius: 5px;margin-right: 10px;border: 1px solid lightgray;font-size: 10px;">免费试用</button>
                </div>
            </div>
            </div>`},
      });
}